@page "/organization"
@using BootBlazor.Servers.Auth
@using BootBlazor.Servers.Helper
@using BootBlazor.Servers.Data
@using BootBlazor.Servers.Services

@rendermode RenderMode.InteractiveServer
@attribute [StreamRendering]

<div class="d-flex flex-column" style="height:100%;">
    <PageHeader Title="@Loc["OrganizationPage_Title"]" UseGrid="false">
        @if (_accessService.CheckHasElementRights("OrganizationAddBtn").Result)
        {
            <MudIconButton Class=" mr-2" Color="Color.Primary" Icon="@Icons.Material.Filled.Add" Variant="Variant.Outlined"
                           Size="Size.Medium" OnClick="AddOrganizationClick"></MudIconButton>
        }
        @if (_accessService.CheckHasElementRights("OrganizationDeleteBtn").Result)
        {
            <MudIconButton Class=" mr-2" Color="Color.Primary" Icon="@Icons.Material.Filled.Delete" Variant="Variant.Outlined"
                           Size="Size.Medium" Disabled="SelectedOrganizationItem == null"
                           OnClick="DeleteOrganizationClick"></MudIconButton>
        }
    </PageHeader>

    <MudPaper class="flex-1 d-flex" style="overflow:auto;">

        <div class="flex-0 pt-2" style="width:340px;overflow:auto;">
            <MudTreeView Items="@OrganizationItems" Hover="true" T="OrganizationItem"
                         SelectedValue="SelectedOrganizationItem" SelectedValueChanged="OrganizationSelected">
                <ItemTemplate>
                    <MudTreeViewItem @bind-Expanded="@context.Expanded" Items="@context.Children" Value="@context.Value">
                        <Content>
                            <MudTreeViewItemToggleButton @bind-Expanded="@context.Expanded" Visible="context.HasChildren" />
                            <MudIcon Icon="@Icons.Material.Outlined.AccountTree" Class="mr-2"></MudIcon>
                            <MudText Typo="Typo.subtitle2" Style="user-select:none;">@context.Value?.Name</MudText>
                            <div class="identify" style="display:none;">@context.Value?.Id</div>
                            <MudSpacer />
                            <MudIconButton Size="Size.Small" Icon="@Icons.Material.Filled.Groups3"
                                           Color="Color.Inherit" OnClick="()=>EditMemberClick(context.Value!.Id)"></MudIconButton>
                            @if (_accessService.CheckHasElementRights("OrganizationOrderBtn").Result)
                            {
                                <MudIcon Icon="@Icons.Material.Filled.DragHandle" Class="draghandle cursor-grabbing" />
                            }
                        </Content>
                    </MudTreeViewItem>
                </ItemTemplate>
            </MudTreeView>
        </div>

        <MudDivider Vertical="true" Class="" />

        <div class="flex-1 mx-2">
            @if (EditVisible)
            {
                <div class="pa-4">
                    <EditForm Model="EditModel" OnValidSubmit="EditSubmit" style="width:100%;">
                        <DataAnnotationsValidator />
                        <OrganizationTreeSelect @bind-SelectedValue="EditModel.ParentId" />
                        <MudTextField Class="mt-4" @bind-Value="EditModel.Name" Variant="Variant.Outlined" Margin="Margin.Dense"
                                      Placeholder="@Loc["MenuPage_MenuNamePlaceHolder"]" For="@(() => EditModel.Name)"
                                      Label="@Loc["MenuPage_MenuNameLablel"]"></MudTextField>

                        <div class="d-flex mt-4">
                            <MudSpacer />
                            <MudButton Variant="Variant.Filled" Color="Color.Default" Class="mr-4"
                                       ButtonType="ButtonType.Button" StartIcon="@Icons.Material.Filled.Cancel" OnClick="CancelClick">@Loc["MenuPage_CancelButtonText"]</MudButton>
                            <MudButton Variant="Variant.Filled" Color="Color.Primary"
                                       ButtonType="ButtonType.Submit" StartIcon="@Icons.Material.Filled.Upload">@Loc["MenuPage_SubmitButtonText"]</MudButton>
                        </div>
                    </EditForm>
                </div>
            }

            @if (MemberVisible)
            {
                <div class="pa-4">
                    <MudText Typo="Typo.h6" Class="mb-1">
                        @(EditModel.Name)的成员管理
                    </MudText>
                    <MudTable Class="mb-4" Items="@OrganizationMembers" Hover="true"
                              Breakpoint="Breakpoint.Sm" Outlined="true" Elevation="0"
                              LoadingProgressColor="Color.Info" Dense="true" FixedHeader="true" Virtualize="true"
                              Height="calc(100vh - 350px)">
                        <ColGroup>
                            <col style="min-width:100px;width:100px;max-width:100px;" />
                            <col style="min-width:100px;width:100px;max-width:100px;" />
                            <col style="min-width:150px;" />
                            <col style="min-width:110px;width:110px;max-width:110px;" />
                        </ColGroup>
                        <HeaderContent>
                            <MudTh>
                                @Loc["UserPage_TableH1"]
                            </MudTh>
                            <MudTh>
                                @Loc["UserPage_TableH2"]
                            </MudTh>
                            <MudTh>
                                @Loc["UserPage_TableH3"]
                            </MudTh>
                            <MudTh>
                                @Loc["UserPage_TableH5"]
                            </MudTh>
                        </HeaderContent>
                        <RowTemplate>
                            <MudTd DataLabel="@Loc["UserPage_TableH1"]">
                                @(OrganizationMembers.IndexOf(context) + 1)
                            </MudTd>
                            <MudTd DataLabel="@Loc["UserPage_TableH2"]">
                                @if (context.IsLeader)
                                {
                                    <MudBadge Icon="@Icons.Material.Filled.ManageAccounts"
                                              Color="Color.Primary" Overlap="true" Bordered="true">
                                        @if (string.IsNullOrEmpty(context.MemberAvatar))
                                        {
                                            <MudAvatar Color="Color.Primary">
                                                @context.MemberName?.First()
                                            </MudAvatar>
                                        }
                                        else
                                        {
                                            <MudAvatar>
                                                <MudImage Src="@("Avatars/" + context.MemberAvatar)">
                                                </MudImage>
                                            </MudAvatar>
                                        }
                                    </MudBadge>
                                }
                                else
                                {
                                    @if (string.IsNullOrEmpty(context.MemberAvatar))
                                    {
                                        <MudAvatar Color="Color.Primary">
                                            @context.MemberName?.First()
                                        </MudAvatar>
                                    }
                                    else
                                    {
                                        <MudAvatar>
                                            <MudImage Src="@("Avatars/" + context.MemberAvatar)">
                                            </MudImage>
                                        </MudAvatar>
                                    }
                                }
                            </MudTd>
                            <MudTd DataLabel="@Loc["UserPage_TableH3"]">
                                @context.MemberName
                            </MudTd>
                            <MudTd DataLabel="@Loc["UserPage_TableH5"]">
                                <MudIconButton Size="@MudBlazor.Size.Small" Icon="@Icons.Material.Outlined.Delete" Color="Color.Primary"
                                               OnClick="() => RemoveMember(context.MemberId)" Class="mr-2" />

                                @if (context.IsLeader)
                                {
                                    <MudTooltip Text="设为普通成员" Color="Color.Primary">
                                        <MudIconButton Size="Size.Small" Icon="@Icons.Material.Filled.Person" Color="Color.Primary"
                                                       OnClick="()=>MakeNormal(context.MemberId)"></MudIconButton>
                                    </MudTooltip>
                                }
                                else
                                {
                                    <MudTooltip Text="设为负责人" Color="Color.Primary">
                                        <MudIconButton Size="Size.Small" Icon="@Icons.Material.Filled.ManageAccounts" Color="Color.Primary"
                                                       OnClick="()=>MakeLeader(context.MemberId)"></MudIconButton>
                                    </MudTooltip>
                                }
                            </MudTd>
                        </RowTemplate>
                    </MudTable>
                    <MudButton FullWidth Variant="Variant.Outlined" OnClick="AddNewMember">
                        <MudIcon Icon="@Icons.Material.Filled.Add"></MudIcon>
                    </MudButton>
                </div>
            }
        </div>

    </MudPaper>
</div>
